<template>
  <div>
     <!-- <p >{{text}}</p> -->
  </div>
</template>

<script>
// 多组件调用 注意:必须告诉它需要去哪个ID下渲染,如果直接用,第一个组件生成时会调用生成一个文本编辑器,
         //第二个生成时也会成一个一样的,再生成新的 
// 1:下载 moundel :npm 安装 npm i wangeditor --save
//2: 导入文本编辑器
import E from 'wangeditor'
// import B from 'wangeditor'
export default {
  data(){
    return{
      a:'34',
    }
  },
  // 要在mounted里面调用,不然会报 "错误：初始化编辑器时候未传入任何参数，请查阅文档"
  mounted (){
   this.editorInit()
  },
  props:['div'],
  methods:{
    add(){
      this.b=this.a
      console.log(this.b);
    },
  editorInit(){
    this.editor = new E(document.getElementById(this.div))
    // 生成前限制高度,其他样式可在#div1下慢慢修改
   this. editor.config.height = 200
    // 编辑器 z-index 默认为 10000，默认太高,一般要自行调整。
    this.  editor.config.zIndex = 500
    //  可以修改 placeholder 的提示文字。
    this. editor.config.placeholder = '张三李四王二麻子'
     // 取消自动 focus
    this. editor.config.focus = false
    //  获取里面的值,注意:要同步用a的值要在watch里面监听a的变化
    this.editor.config.onchange = (newHtml) =>{this.a=newHtml};
    this.editor.create()

  }

}
}
</script>

<style>
  #div1{
    width:80%;
  }
</style>